<template>
  <scroll class="suggest" 
  :data = "result"
  :pullup = "pullup"
  :beforeScroll = "beforeScroll"
  @beforeScroll = "listScroll"
  @scrollToEnd = "scrollToEnd"
  ref="suggest">
    <ul class="suggestlist">
      <li class="suggestitem" v-for="(item,index) in result" :key = "index" @click="selectItem(item)">
        <div class="icon">
          <i :class="getIcon(item)"></i>
        </div>
        <div class="name">
          <p class="text" v-html="getDisplayNmae(item)" :class="getDeleteLine(item)"></p>
        </div>
      </li>
      <loading v-show="hasMore" title=""></loading>
    </ul>
    <div class="no-result-wrapper" v-show="!hasMore && !result.length">
      <no-result title="抱歉无结果！"></no-result>
    </div>
  </scroll>
</template>

<script>
import {search} from "api/search.js"
import {ERR_OK} from "api/config.js"
import {createsong,processSongsUrl} from "commom/js/song.js"
import {Singer} from "commom/js/singer.js"
import {mapMutations,mapActions} from 'vuex'
import scroll from 'base/scroll/scroll.vue';
import loading from 'base/loading/loading.vue'
import NoResult from 'base/no-result/no-result.vue'
const perpage = 20;
const TYPE_SINGER = 'singer'
export default {
  props:{
    showSinger:{
      type:Boolean,
      default:true
    },
    querry:{
      type:String,
      default:''
    }
  },
  data(){
    return{
      page:0,
      result:[],
      pullup : true,
      hasMore:true,
      beforeScroll:true
    }
  },
  methods:{
    refresh(){
      this.$refs.suggest.refresh();
    },
    listScroll(){
      this.$emit('listScroll')
    },
    selectItem(item){//点击跳转路由
      if(item.type === TYPE_SINGER){
        const singer = new Singer({
          id:item.singermid,
          name:item.singername
        })
        this.$router.push({
          path:`/search/${singer.id}`
        })
        this.setSinger(singer)
      }else{
        this.insertSong(item);
      }
      this.$emit("search");//排发出一个方法
    },
    search(querry){//返回查询的数据
      this.page = 1;
      this.hasMore = true
      this.$refs.suggest.scrollTo(0,0);
      search(querry,this.page,this.showSinger,perpage).then((res)=>{
        if(res.code === ERR_OK){
          // this.result = this._genResult(res.data)
          this._genResult(res.data)
          this.checkMore(res.data)
        }
      })
    },
    scrollToEnd(){//滚动到底部时触发
      if(!this.hasMore) {
        return
      }
      this.page++;
      search(this.querry,this.page,this.showSinger,perpage).then((res)=>{
        if(res.code === ERR_OK){
          // this.result = this.result.concat(this._genResult(res.data))
          this._genResult(res.data)
          this.checkMore(res.data)
        }
      })
    },
    checkMore(data){//检查是否还可以下拉加载
      const song = data.song
      if (!song.list.length || (song.curnum + song.curpage * perpage) > song.totalnum) {
        this.hasMore = false
      }
      // if(this.result.length < 14){
      //   this.hasMore = false
      // }
    },
    _genResult(data){//处理返回的查询的数据
      let ret = []
      if(data.zhida && data.zhida.singerid){
        ret.push({...data.zhida,...{type:TYPE_SINGER}})
      }
      if(data.song){
        // ret = ret.concat(this._normalizeSongs(data.song.list))
        processSongsUrl(this._normalizeSongs(data.song.list)).then((songs) => {        
          ret = ret.concat(songs)
          this.result = this.result.concat(ret)
          if(this.result.length < 14){//判断等待符号消失
            this.hasMore = false
          }
          if(this.result.length === 0){
            console.log("ooooooooo")
          }
        })
      }
    },
    _normalizeSongs(list){//处理返回的查询的数据    
      let ret = []
      list.forEach((musicData)=>{
        if(musicData.songid && musicData.albumid){
          if(musicData.pay.payplay === 0){
            ret.push(createsong(musicData))
          }
        }
      })
      return ret;
    },
    getIcon(item){//获取对应是歌曲还是歌手的图标
      if(item.type == TYPE_SINGER){
        return "icon-singer-normal"
      }else{
        return "icon-music-normal"
      }
    },
    getDeleteLine(item){
      if(item.payplay === 1){
        return "deleteline";
      }else if(item.payplay === 0){
        return '';
      }
    },
    getDisplayNmae(item){//获取对应的歌曲名字或歌手名字
      if(item.type == TYPE_SINGER){
        return item.singername
      }else{
        return `${item.album}-${item.singer}`
      }
    },
    ...mapMutations({
      setSinger:"SET_SINGER"
    }),
    ...mapActions([
      'insertSong'
    ])
  },
  watch:{
    querry(newQuerry){//监听输入的变化
      this.result = []
      this.search(newQuerry);
    },
    // result: {
    //   handler: function (newVal) {
    //       // if(newVal.length < 14){//判断等待符号消失
    //       //   this.hasMore = false
    //       // }
    //   },
    //   deep: true
    // }
  },
  components:{
    scroll,
    loading,
    NoResult
  }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
@import "~commom/stulys/mixin.styl"
.suggest
  height 100%
  overflow hidden
  .no-result-wrapper
    position: absolute
    width: 100%
    top: 50%
    transform: translateY(-50%)
  .suggestlist
    padding 0 30px
    .suggestitem
      display flex
      align-items center
      padding-bottom 20px
      .icon
        flex 0 0 30px 
        width 30px
        [class ^="icon-"]
          font-size $font-size-medium
          color $color-text-l
        .icon-singer-normal
          color $color-theme  
      .name
        flex 1
        font-size: $font-size-medium
        color: $color-text-d
        overflow: hidden   
        .text
          no-wrap() 
          &.deleteline
            text-decoration:line-through; 

</style>